
@import "zerar.css";
@import "easyTooltip.css";
@import "fonte-face.css";


/****************************
    Estilo do index: Topo
*****************************/

body{ /* define cor de fundo da pagina de login*/
    background: #f7f7f7;
}

#topo{ /* fundo do topo onde temos o logo e os botões */
    height: 85px;
    width: 100%;
    background: #ebebeb;
    border-top: 14px solid #005e8a;
    
}

#topo img{ /* definicoes para o logo */
    margin-left: 140px;
}

#botoes{ /* div que contem os botoes do topo da pagina */
    position: absolute;
    top: 0;
    left: 530px;
    height: 152px;
    width: 620px;
    text-align: center; /* para ie9 */
}

#botoes div{ /* estilizacao de cada botao */
 background: #005e8a;
 height: 100px;
 width: 140px;
 margin-left: 15px;
 float: left;
 cursor: pointer;

 border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
 
}

#botoes div a{ /* estilizacao de casa botao: definicoes para link  */
    color: #e2e2e2;
    text-decoration: none;
}

#botoes div a img{ /* estilizacao de cada botao: definicoes para a imagem do botao */
                display: block;
                margin: 17px auto 0;
                border: none;
}

#botoes div a p{ /* estilizacao de cada botao: definicoes para o nome do botao */
    margin-top: 5px;
    text-align: center;
    font: 16px "Trebuchet MS", Tahoma, sans-serif;
    font-weight: bold;
}

#botoes div a img, #botoes div a p{ /* estilizacao de cada botao: definicoes de opacidade para imagem e nome do botao */
                opacity: 0.80;
                -moz-opacity: 0.80;
                filter: alpha(opacity=80);
}

#botoes div a:hover img, #botoes div a:hover p{ /* estilizacao de cada botao: opacidade normal ao passar o mouse */
                opacity: 1;
                -moz-opacity: 1;
                filter: alpha(opacity=100);
}

/****************************
    Estilo do index: Centro
*****************************/


#centro { /* definicao do centro e imagem de fundo*/
    height: 604px;
    
    font-family: "Ubuntu", "Trebuchet MS", Verdana, sans-serif;
}

#slide-img {
   float:left;
   margin-left: 245px;
   margin-top: 5px;
   height:596px; /* a largura padrão das imgs dentro do slide*/
   overflow:hidden;
   width:906px; /* o altura padrão das imgs dentro do slide*/;
}

#slide-img ul li img{
    border: 3px solid #eee;
    border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
}

#login{ /* fundo do login com opacidade */
    background: #000;
    height: 220px;
    width: 345px;
    opacity: 0.65;
    -moz-opacity: 0.65;
    filter: alpha(opacity=65);
    border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;

 }

form#log{ /* formulario contendo os inputs */
    margin: 10px;
    height: 215px;
    width: 230px;
    font-weight: bold;
}

form#log,#login{
    position: absolute;
    top: 280px;
    left: 50px;
}

form#log span, form#log input{ /* disposicao dos inputs e labels*/
    display: block;

}

form#log #image{ /* posicionamento da imagem do cadeado */
    float: right;
    margin-top: -40px;
    margin-right: -85px;
}

form#log legend{ /* posicionamento da legenda do formulario de login */
    color: #fff;
    margin-top: 3px;
    margin-bottom: 15px;
    width: 280px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e2e2;
}

form#log span{ /* definicao de cor e margem para os labels */
    color: #fff;
    margin: 10px;
}

form#log input{ /* definicao de margem para os inputs */
    margin: 10px;
}

form#log input#usuario, form#log input#senha{ /* definicoes para os inputs de texto*/
    height: 28px;
    border: none;
    border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
    font: 18px "Ubuntu", "Trebuchet MS", Verdana, sans-serif;
    font-weight: bold;
    width: 300px;
}

form#log input#botao{
    height: 30px;
    padding: 5px;
    padding-bottom: 10px;
    font-weight: bold;
    font-family: "Ubuntu", "Trebuchet MS", Verdana, sans-serif;
}



/******** Definições Especiais ********/

/**** Mensagem de erro na pagina de login (posicionamento) ****/

div.erroLogin{
  position: absolute;
  top: 38%;
  left: 50px;

}




/****************************
    Estilo do index: Rodape
*****************************/

#rodape{
    background: #f96c0f;
    height: 30px;

}

